<template>
  <div class="case">
    <carousel></carousel>
    <div class="responsive clearfix">
      <div v-for="(item,i) in currentPageData" :key="i" class="list">
        <router-link :to="{path:item.url, query:{img: item.img, address: item.address, suntitle: item.subtitle, introduce: item.introduce, createDate: item.createDate}}">
          <p>{{item.introduce}}</p>
          <img :src="require(`../assets/image/case/${item.img}`)" alt="">
          <div>{{item.address}}</div>
        </router-link>
      </div>
    </div>
    <div class="findQuery">
      <el-pagination
        @current-change="findCurrent"
        @prev-click="prevPage"
        @next-click="nextPage"
        background
        layout="prev, pager, next"
        :total="(productList.length-1)/2">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Carousel from '../components/carousel.vue'

export default {
  data() {
    return {
      //所有数据
      productList: [
        {img: '详情.png',address: '案列标题标题标题',subtitle: '二级标题', introduce: '案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案列介绍案案列介绍案列介绍', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
        {img: '详情.png',address: '好地方',subtitle: '快来玩快来玩可好玩了', introduce: '此处省略1WWWW字', createDate: '2020-3-21 12:36', url: '/detail'},
      ],
      totalPage: 1, // 总共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 20, // 每页显示数量
      currentPageData: [] //当前页显示内容
    }
  },
  components: {Carousel},
  methods: {
    calculation() {
      // 计算一共有几页
      // 总页数 = 四舍五入(所有数据的数组长度 / 显示数量)
      this.totalPage = Math.ceil(this.productList.length / this.pageSize);
      // 计算得0时设置为1
      // 如果总页数为0时 则显示1 不为零则正常四舍五入显示
      this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
      console.log(this.totalPage,this.productList.length)
      this.setCurrentPageData();
    },
    setCurrentPageData() {
      // 设置当前页面数据 
      // 从哪开始截取 = 当前页数 - 1 * 显示数量 Ps: 1 - 1 * 20 = 0; 2 - 1 * 20 = 20
      let begin = (this.currentPage - 1) * this.pageSize;
      // 到哪结束 = 当前页数 * 显示数量 Ps: 1 * 20 = 20; 2 * 20 = 40
      let end = this.currentPage * this.pageSize;
      // 显示数据 = 所有数据中的 ? 0 ~ 20 : 20 ~ 40
      this.currentPageData = this.productList.slice(begin, end);
    },
    //上一页
    prevPage(e) {
      console.log(e)
      console.log(this.currentPage);
      if (this.currentPage == 1) return;
      this.currentPage--;
      this.setCurrentPageData();
    },
    // 下一页
    nextPage(e) {
      console.log(e)
      if (this.currentPage == this.totalPage) return;
      this.currentPage++;
      this.setCurrentPageData();
    },
    // 选择某一页
    findCurrent(e) {
      this.currentPage = e
      this.setCurrentPageData();
    }
  },
  created() {

  },
  mounted() {
    this.calculation()
  }
}
</script>

<style lang="scss" scoped>
.case {
  margin-top: 80px;
  text-align: center;
  
  .findQuery {
    margin-top: 200px;
    margin-bottom: 70px;
  }

  .responsive {
    text-align: center;
    margin-top: 30px;
    
    .list {
      margin-left: 30px;
      margin-bottom: 30px;
      position: relative;
      left: 6%;
      height: 520px;
      float: left;
      width: 100%;
      max-width: 380px;

      &:hover {
        box-shadow: 0px 0px 10px #3296FA;
      }
      > a {
        > p {
          font-size: 20px;
          text-align: left;
          position: absolute;
          display: none;
          padding: 0px 30px;
          top: 50px;
          color: #222222;
          height: 380px;
          width: 380px;
          overflow: hidden;
          // white-space: nowrap;
          text-overflow: ellipsis;
        }

        &:hover {          
          > img {
            opacity: 0.5;
          }

          > p {
            display: block;
            opacity: 1;
            color: #222222;
          }
        }

        div {
          height: 60px;
          line-height: 60px;
          color: #222222;
          font-size: 20px;
          font-weight: 600;
          background-color: #FAFAFA;
        }
      }
    }
  }

  @media screen and (min-width: 1500px) and (max-width: 1920px) {
    .responsive {
      width: auto;
      max-width: 1920px;
    }
  }
  @media screen and (min-width: 1921px) {
    .responsive {
      width: auto;
      max-width: 2440px;
    }
  }
  @media screen and (min-width: 1080px) and (max-width: 1499px) {
    .responsive {
      width: auto;
      max-width: 1499px;
    }
  }
  @media screen and (max-width: 1080px) {
    .responsive {
      width: auto;
      max-width: 1080px;
    }
  }
}

</style>